<template>
	<view class="container" style="height: 100%;">
		<view>
			<mySearch @click.native="toSearchPage"></mySearch>
			<!-- <wd-search /> -->
		</view>
		<view :style="{ height: wh + 'px', display: 'flex' }">
			<view style="height: 100%;width: 25%;">
				<wd-sidebar v-model="active">
				  <wd-sidebar-item v-for="(item,index) in cateList" :value="index" :label="item.cat_name" :key="item.cat_id"/>
				</wd-sidebar>
			</view>
			<view class="goodsZone">
				<view v-for="(item,index) in cateList[active].children" :key="item.cat_id">
					<view class="goodsTitle">
						<text style="font-weight: 700;font-size: 13px;">/{{ item.cat_name }}/</text>
					</view>
					<wd-grid :column="3">
					  <wd-grid-item use-slot v-for="(item2,index2) in item.children" :key="item2.cat_id">
						  <!-- 使用flex布局改变主轴方向为纵轴，然后通过侧轴对齐 让上下元素居中 -->
						  <view style="display: flex;flex-direction: column;align-items: center;">
							  <image style="width: 150rpx;height: 150rpx;" :src="item2.cat_icon.replace('api-ugo-dev','api-hmugo-web')"></image>
							  <view style="text-align: center;">
							  	<text>{{ item2.cat_name }}</text>
							  </view>
						  </view>
					  </wd-grid-item>
					</wd-grid>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref,onMounted } from 'vue'
	import { catrgoryGetService } from '../../api/cate'
	import mySearch from '../../components/my-search/my-search.vue'
	
	const active = ref(0);
	const cateList = ref([]);
	const wh = ref(0);
	
	//获取分类数据
	const getCategory = async () => {
		let {data:res} = await catrgoryGetService();
		console.log("categoryRes===>",res);
		cateList.value = res.message;
	}
	
	//获取当前屏幕可用高度
	const getWindowHeight = () => {
		const sysInfo = uni.getSystemInfoSync()
		// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
		wh.value = sysInfo.windowHeight - 52;
	}
	getWindowHeight();
	
	const toSearchPage = async () => {
		uni.navigateTo({
			url: '/subpkg/search/search'
		})
	}
	
	onMounted(() => {
		getCategory();
	})
	
</script>
<style lang="scss" scoped>
	.container{
		--wot-sidebar-active-color: #fa4350;
		:deep(.wd-sidebar-item--active){
			color: #000
		}
		:deep(.wd-sidebar-item__badge){
			font-size: 14px;
		}
		--wot-sidebar-width: 100%;
		--wot-sidebar-border-radius: 0px; //去除分类选中项的圆角边框样式
		//隐藏滚动条
		::-webkit-scrollbar {
			width: 0px;
		}
		
		.goodsZone{
			padding: 18rpx;
			background-color: #fff;
			max-height: 100%;
			width: 75%;
			overflow: auto;
			.goodsTitle{
				text-align: center;
				background-color: #fff;
				padding: 20rpx 0;
			}
		}
	}
</style>